<!--  -->
<template>
  <div>
    <demo></demo>
    <div class="content_detail">
      <div class="content_detail_content">
        <div class="block_left">
          <el-carousel height="500px">
            <el-carousel-item>
              <img class="conetnt_img" :src="book.pictureHeadPath" />
            </el-carousel-item>
          </el-carousel>
        </div>

        <div class="block_right">
          <div class="right_font">
            {{ book.name }}
          </div>
          <div class="right_serve">
            <div class="right_serve_box">包邮</div>
            <div class="right_serve_box">退货赔运费</div>
            <div class="right_serve_box">半透磨砂全包防摔</div>
          </div>

          <div class="block_detail_content">
            <h3>图书详情：</h3>
            <p style="text-indent: 2em">
              {{ book.bookDetail }}
            </p>
          </div>
          <div class="block_detail_shoppingCar">
            <el-input-number
              v-model="num"
              @change="handleChange"
              :min="1"
              :max="book.stock"
              label="描述文字"
            ></el-input-number>
            <el-button
              @click="addCart"
              type="danger"
              icon="el-icon-shopping-cart-2"
              >加入购物车</el-button
            >
            <div class="book_price">
              价格：<span>￥{{ book.price }}</span>
            </div>
            <div class="book_sales_stock">
              <el-row>
                <el-col :span="2"> <div>&nbsp;</div></el-col>
                <el-col :span="10">
                  <span style="color: black">销量：</span
                  ><span>{{ book.sales }}</span>
                </el-col>
                <el-col :span="12">
                  <span style="color: black">库存：</span
                  ><span>{{ book.stock }}</span>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>

      <h1>我是评论</h1>
      <div class="mt50 commentHtml">
        <h6 class="c-c-content c-infor-title" id="i-art-comment">
          <span class="commentTitle">课程评论</span>
        </h6>
        <section class="lh-bj-list pr mt20 replyhtml">
          <ul style="list-style-type: none">
            <li class="unBr" v-if="true">
              <!-- 记得修改为登录！！！！！！！！！！！！-->
              <!-- <aside class="noter-pic">
              <img width="50" height="50" class="picImg" src="../assets/pic.jpg">
              </aside> -->
              <div class="of">
                <section class="n-reply-wrap">
                  <fieldset>
                    <textarea
                      name=""
                      v-model="comment.content"
                      placeholder="输入您要评论的文字"
                      id="commentContent"
                      style="width: 1420px; height: 100px"
                    ></textarea>
                  </fieldset>
                  <p class="of mt5 tar pl10 pr10">
                    <span class="fl"
                      ><tt
                        class="c-red commentContentmeg"
                        style="display: none"
                      ></tt
                    ></span>
                    <input
                      type="button"
                      @click="addComment()"
                      value="回复"
                      class="lh-reply-btn"
                    />
                  </p>
                </section>
              </div>
            </li>
            <li v-else>
              <h2>
                请先
                <a href="/#/login" title="登录">
                  <em class="icon18 login-icon">&nbsp;</em>
                  <span class="vam ml5">登录</span>
                </a>
                /
                <a href="/#/register" title="注册">
                  <span class="vam ml5">注册</span>
                </a>
                再评论
              </h2>
            </li>
          </ul>
        </section>

        <section>
          <section class="question-list lh-bj-list pr">
            <ul class="pr10" style="list-style-type: none">
              <li
                v-for="(comment, index) in commentData.items"
                v-bind:key="index"
                style="border: 1px solid black"
              >
                <aside class="noter-pic" style="width: 60px; float: left">
                  <img
                    width="50"
                    height="50"
                    class="picImg"
                    src="https://edu-guli2632.oss-cn-shenzhen.aliyuncs.com/product_detail_head.jpg"
                  />
                </aside>
                <div
                  class="noter-txt mt5"
                  style="width: 1200px; padding-left: 100px; height: 40px"
                >
                  <p>{{ comment.content }}</p>
                </div>
                <!-- <div class="of" style="width: 1400px; height: 20px">
                  <span class="fl">
                    <font class="fsize12 c-blue" style="float: left">
                      {{ comment.nickname }}</font
                    ></span
                  >
                  <span class="fr"
                    ><font class="fsize12 c-999 ml5" style="float: right">{{
                      comment.gmtCreate
                    }}</font></span
                  >
                </div> -->
              </li>
            </ul>
          </section>
        </section>
      </div>

      <!-- 公共分页 开始 -->
      <div class="paging" style="border: 1px solid black; float: right">
        <!-- undisable这个class是否存在，取决于数据属性hasPrevious -->
        <a
          :class="{ undisable: !commentData.hasPrevious }"
          href="#"
          title="首页"
          @click.prevent="gotoPage(1)"
          >首</a
        >
        <a
          :class="{ undisable: !commentData.hasPrevious }"
          href="#"
          title="前一页"
          @click.prevent="gotoPage(commentData.current - 1)"
          v-if="commentData.current - 1 >= 1"
          >&lt;</a
        >
        <a
          v-for="page in commentData.pages"
          :key="page"
          :class="{
            current: commentData.current == page,
            undisable: commentData.current == page,
          }"
          :title="'第' + page + '页'"
          href="#"
          @click.prevent="gotoPage(page)"
          >&nbsp;{{ page }}&nbsp;</a
        >
        <a
          :class="{ undisable: !commentData.hasNext }"
          href="#"
          title="后一页"
          @click.prevent="gotoPage(commentData.current + 1)"
          v-if="commentData.current + 1 <= commentData.pages"
          >&gt;</a
        >
        <a
          :class="{ undisable: !commentData.hasNext }"
          href="#"
          title="末页"
          @click.prevent="gotoPage(commentData.pages)"
          >末</a
        >
        <div class="clear" />
      </div>
      <!-- 公共分页 结束 -->
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import demo from "@/components/nav.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    demo,
  },
  data() {
    //这里存放数据
    return {
      num: 7,
      pir_path: [
        "https://edu-guli2632.oss-cn-shenzhen.aliyuncs.com/product_detail_head.jpg",
        "https://edu-guli2632.oss-cn-shenzhen.aliyuncs.com/2020/09/08/3a6f01de9c754cb89da74e6491a667adfile.png",
      ],
      commentData: {
        items: [],
        total: 100,
        current: 2,
        limit: 5,
        pages: 5,
      },
      comment: {},
      book: {},
      user_id: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleChange(val) {
      console.log(val);
    },
    gotoPage(current) {
      console(current);
    },
    addComment() {},
    getComment(current, limit, bookId) {
      let this_ = this;
      this.$http
        .post(
          `http://localhost:88/api/book/info/evaluation/list/${current}/${limit}/${bookId}`
        )
        .then(function (response) {
          console.log(response.data.page);
          this_.commentData.items = response.data.page.records;
          this_.commentData.total = response.data.page.total;
          this_.commentData.current = response.data.page.current;
          this_.commentData.pages = response.data.page.pages;
          console.log(this_.commentData);
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    gotoPage(current) {
      this.getComment(current, this.commentData.limit, this.book.id);
    },

    getBookDetail() {
      this.book = this.$route.query.book;
      // let token = this.$store.state.token;
      // let this_ = this;
      // console.log(this.book);
      // this.$http
      //   .post(`http://localhost:88/api/book/user/verify/jwt/${token}`)
      //   .then(function (response) {
      //     // console.log(response)
      //     this_.user_id = response.data.userId;
      //   })
      //   .catch(function (err) {
      //     console.log(err);
      //   });
    },
    addCart() {
      // this.verification_user();

      let this_ = this;
      this.$http
        .post(`http://localhost:88/api/book/user/verify/jwt/cookie`)
        .then(function (response) {
          if (response.data.code == 200) {
            // this_.username = response.data.username;
            this_.user_id = response.data.userId;

            this_.book.count = this_.num;
            this_.book.totalPrice = this_.num * this_.book.price;
            this_.$http
              .post(
                `http://localhost:88/api/book/info/save/cart/${this_.user_id}`,
                this_.book
              )
              .then(function (response) {
                this_.$message({
                  showClose: true,
                  message: "加入购物车成功！！",
                  type: "success",
                });
              })
              .catch(function (err) {
                console.log(err);
              });
          } else {
            this_.$router.push({
              path: "/login",
            });
            return;
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },

    verification_user() {
      // let token = this.$store.state.token;
      // let this_ = this;
      // if (token == null || token.trim() == "") {
      //   this.$router.push({
      //     path: "/login",
      //   });
      //   return;
      // }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getBookDetail();
    this.getComment(1, 5, this.book.id);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.book_sales_stock {
  font-size: 20px;
  margin-top: 20px;
  color: red;
  font-weight: bold;
}

.book_price {
  font-size: 20px;
  margin-top: 20px;
}
.book_price span {
  font-weight: bold;
  font-size: 30px;
  color: Red;
}

.block_detail_shoppingCar {
  margin-top: 30px;
}

.block_detail_content {
  clear: both;

  height: 207px;
  background: blueviolet;
  overflow: hidden;
}
.right_serve_box {
  height: 40px;
  float: left;
  background: #ffa100;
  margin-left: 20px;
  margin-right: 20px;
  line-height: 40px;
  color: #fff;
  padding: 3px 6px;
  font-weight: 900;
}

.right_serve {
  height: 30px;
  margin-top: 30px;
}

.right_font {
  font-family: "PingFang SC";
  font-size: 28px;
  /* font-weight:500 */
}

.block_right {
  background-color: green;
  width: 500px;
  height: 500px;
  float: right;
  margin-right: 150px;
}
.conetnt_img {
  width: 100%;
  height: 100%;
}
.content_detail {
  margin: 0 auto;
  width: 80%;
  min-width: 1300px;
}

.content_detail_content {
  margin-top: 40px;
  overflow: hidden;
}

.block_left {
  width: 700px;
  float: left;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>